

<template>
<div>
  <el-steps :active="1" align-center>
    <el-step title="填写课程基本信息" ></el-step>
    <el-step title="创建课程大纲"></el-step>
    <el-step title="最终发布" ></el-step>
  </el-steps>
  <br/>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="课程标题">
      <el-input v-model="form.title"></el-input>
    </el-form-item>

      <el-form-item label="课程分类">
        <el-select style="margin-right: 10px;" @change="SubjectOne" v-model="form.subjectParentId" placeholder="一级分类">
          <el-option v-for="s in subjectparentList" :key="s.id" :label="s.title" :value="s.id"></el-option>
        </el-select>
        <el-select v-model="form.subjectId" placeholder="二级分类">
          <el-option v-for="s in subjectFindList" :key="s.id" :label="s.title" :value="s.id"></el-option>
        </el-select>
      </el-form-item>
    <el-form-item label="课程讲师">
      <el-select v-model="form.teacherId" placeholder="请选择">
        <el-option v-for="s in teacherList" :key="s.id" :label="s.name" :value="s.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="总课时">
      <el-input-number v-model="form.lessonNum" controls-position="right"  :min="0" :max="10"></el-input-number>
    </el-form-item>
    <el-form-item label="课程简介" >
      <quill-editor
        v-model="form.description"
      />
    </el-form-item>
    <el-form-item label="课程封面">
      <el-upload
        class="avatar-uploader"
        :action="BASE_URL+'/course/cover'"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        :headers="Token">
        <img v-if="imgurl" :src="imgurl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-form-item>
    <el-form-item label="课程价格">
      <el-input-number v-model="form.price" controls-position="right"  :min="0" :max="10">元</el-input-number>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit()">保存并下一步</el-button>
    </el-form-item>
  </el-form>
</div>
</template>

<script>
import {getToken} from "@/utils/auth";
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'

// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor, /* { default global options } */)
import {getOne,getTow,getTeacher,getseave,gethuixian} from "@/api/course"
export default {
 components:{

 },
  data() {
    return {
      imgurl:'',
      BASE_URL:process.env.VUE_APP_BASE_API,
      saveid:null,
      form:{
        title:'',
        subjectParentId:'',
        subjectId:'',
        teacherId:'',
        lessonNum:'',
        price:'',
        cover:'',
      },
      subjectparentList:{},
      subjectFindList:{},
      teacherList:{},
      Token:{
        'token':getToken()
      }

    };
  },
  methods: {
    handleAvatarSuccess(res, file) {
      console.log(file)
      this.form.cover=file.response.data
      this.imgurl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    subjectparentOne(){
     getOne().then(res=>{
       if (res.code==20000){
         this.subjectparentList=res.data

       }
     })
    },
    SubjectOne(){
     getTow(this.form.subjectParentId).then(res=>{
        if (res.code==20000){
          this.subjectFindList=res.data
        }
     })
    },
    getTeacherList(){
      getTeacher().then(res=>{
        if (res.code==20000){
          this.teacherList=res.data
        }
      })
    },
    submit(){
       getseave(this.form).then(res=>{
         if (res.code==20000){
          this.$router.push({path:'/course/chapter',query:{id:res.data}})
         }
       })
    },
    savehuixian(){
     this.saveid= this.$route.query.saveid
      if (this.saveid!=null){
       gethuixian(this.saveid).then(res=>{
         if (res.code==20000){
           this.form.title=res.data.title
           this.form.subjectParentId=res.data.subjectParentId
           this.form.teacherId=res.data.teacherId
           this.form.subjectId=res.data.subjectId
           this.form.cover=res.data.cover
           this.form.price=res.data.price
           this.form.description=res.data.description
           this.form.lessonNum=res.data.lessonNum
         }
       })
      }
    }
  },
  created() {
   this.subjectparentOne()
   this.getTeacherList()
    this.savehuixian()
  }
}
</script>
<style scoped lang="scss">
.ql-editor{
  height:400px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
